<!--
 * @Author: NaturalHulk 2066634567@qq.com
 * @Date: 2024-11-22 10:50:40
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-11-22 10:53:14
 * @FilePath: /xhs-mom-new/src/views/order/producManaga/producPlan/end.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  // 回显数据
  data: {
    type: Object,
    default: () => {}
  },
  //   判断
  title: {
    type: String,
    default: ''
  }
})

// 封装 方法 字典查询
const {
  plan_type // 计划类型
} = proxy.useDict('plan_type')

const emit = defineEmits(['cancel', 'submit'])

// 表单Ref
const ruleFormRef = ref(null)

// 新增字段
const ruleForm = reactive({ terminationReason: '' })

/**
 * 表单校验
 */
const rules = reactive({
  terminationReason: [{ required: true, message: '请输入终止原因', trigger: 'blur' }]
})

/**
 * 提交
 */
const submit = () => {
  return new Promise(async (resolve, reject) => {
    ruleFormRef.value.validate((valid, fields) => {
      if (!valid) {
        resolve(false)
        proxy.warningMsg('请填写完整')
        return
      }
      resolve(ruleForm)
    })
  })
}

/**
 * 事件抛出
 */
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <el-form
      inline
      ref="ruleFormRef"
      class="demo-ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="right"
      status-icon
    >
      <el-form-item label="终止原因" prop="terminationReason">
        <el-input clearable v-model="ruleForm.terminationReason"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
.btn {
  margin-top: 20px;
}
</style>
